<template>
  <div>
    <el-dialog
      customClass="elc-dialog"
      :close-on-click-modal="false"
      title="新建角色"
      :visible.sync="dialogVisible"
      width="520px"
      @close="cancel"
    >
      <div>
        <InfoComp ref="infoComp" />
        <TreeComp ref="treeComp" :menuOptions="menuOptions" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="save" type="primary">确定</el-button>
        <el-button icon="el-icon-circle-close" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import InfoComp from "./common/info.vue";
import TreeComp from "./common/tree.vue";
// import { addRole } from "@/api/role.js";
import Mixins from "./mixins";
export default {
  mixins: [Mixins],
  components: { InfoComp, TreeComp },
  data() {
    return {
      dialogVisible: false,
      menuOptions: [],
    };
  },
  methods: {
    show() {
      this.getAllMenuList().then((res) => {
        this.menuOptions = res;
      });
      this.dialogVisible = true;
    },
    save() {
      const p1 = new Promise((resolve) => {
        this.$refs["infoComp"].$refs["formDataRef"].validate((valid) => {
          if (valid) resolve();
        });
      });
      const p2 = new Promise((resolve) => {
        this.$refs["treeComp"].$refs["formDataRef"].validate((valid) => {
          if (valid) resolve();
        });
      });
      Promise.all([p1, p2]).then(() => {
        const paramsInfo = this.$refs["infoComp"].form;
        const paramsTree = this.$refs["treeComp"].form;
        // addRole
        let params = {
          ...paramsInfo,
          ...paramsTree,
        };
        this.$axios.post(this.$api.setting.roleApi.addRole, params).then(() => {
          this.cancel();
          this.$parent.initRole();
        });
      });
    },
    cancel() {
      this.$refs.infoComp.reset();
      this.$refs.treeComp.reset();
      this.dialogVisible = false;
    },
  },
};
</script>

<style></style>
